

<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px"> 长者健康指数</span>
      </div>
      <div>
        <div class="chart"  ref="chart" style="width: 100%; height: 300px"></div>
      </div>
      <div style="position: absolute;top: 24%;right: 6%;font-size: 12px;">
         <div class="title-continer">
           <div style="flex: 2;" class="one">指数</div>
           <div class="two" style="background: #131C59;color: #1CDBFE">男性</div>
           <div class="two" style="background: #131C59;color:#E4C431 ;" >女性</div>
         </div>
        <div class="title-continer">
          <div style="flex: 2;" class="one">心率</div>
          <div class="two" style="color: #1CDBFE">75分</div>
          <div class="two" style="color:#E4C431">80分</div>
        </div>
        <div  class="title-continer">
          <div style="flex: 2;" class="one">体质指数</div>
          <div class="two" style="color: #1CDBFE">85分</div>
          <div class="two" style="color:#E4C431">70分</div>
        </div>
        <div  class="title-continer">
          <div style="flex: 2;" class="one" >收缩压</div>
          <div class="two" style="color: #1CDBFE">90分</div>
          <div class="two" style="color:#E4C431">80分</div>
        </div>
        <div  class="title-continer">
          <div style="flex: 2;" class="one">舒张压</div>
          <div class="two" style="color: #1CDBFE">85分</div>
          <div class="two" style="color:#E4C431">80分</div>
        </div>

        <div  class="title-continer">
          <div style="flex: 2;" class="one">血氧饱和度</div>
          <div class="two" style="color: #1CDBFE">70分</div>
          <div class="two" style="color:#E4C431">70分</div>
        </div>
        <div  class="title-continer" style="border-bottom: 2px solid #0E1E6D">
          <div style="flex: 2;" class="one">脉搏</div>
          <div class="two" style="color: #1CDBFE">90分</div>
          <div class="two" style="color:#E4C431">80分</div>
        </div>

      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: '',
  // props: {
  //   data: Object
  // },
  data() {
    return {
      data: {
        title: '',
        position: ['50%', '14%'],
        center: ['25%', '50%'],
        indicator: [
          {text: '血氧饱和度'},
          {text: '脉搏'},
          {text: '心率'},
          {text: '舒张压'},
          {text: '收缩压'},
          {text: '体质指数'}
        ],
        data: [
          {
            name: '男性',
            color: '#1CDBFE',
            areaClor:'rgba(28, 219, 254, 0.3)',
            value: [75, 85, 90, 85,70, 90]
          },
          {
            name: '女性',
            color: '#E4C431',
            areaClor:'rgba(228, 196, 49, 0.3)',
            value: [80, 70, 80, 80, 70, 80]
          }
        ]
      },
    }
  },
  methods: {
    setChart() {
      let seriesData = []
      this.data.data.forEach(item => {
        seriesData.push(
            {
              value: item.value,
              name: item.name,
              symbol: 'none',
              symbolSize: 5,
              itemStyle: {
                color: item.color
              },
              areaStyle:{
                normal: {
                  color: item.areaClor// 填充的颜色。[ default: "#000" ]
                }
              },
              lineStyle: {
                normal: {
                  color: item.color,
                  width: 1,
                },
                emphasis: {
                  width: 2,
                }
              }
            }
        )
      })
      let option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: '#040737',
          borderColor: '#0E8BFF', // 设置边框颜色，这里是绿色
          borderWidth: 2, // 设置边框宽度，这里是2像素
          textStyle: { // 设置文本样式
            color: '#ffffff', // 设置文本颜色
            fontSize: 16 // 设置文本字体大小
          },
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: {
          text: this.data.title,
          top: "5%",
          left: this.data.position[0],
          textStyle: {
            color: '#fff',
            fontSize:12,
          }
        },
        legend: {
          data: this.data.data.map(item => {
            return {name: item.name}
          }),
          left: "70%",
          top: "10%",
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            color: '#084FA0',
            fontSize: 14
          }
        },
        radar: {
          indicator: this.data.indicator,
          center: this.data.center,
          radius: "50%",
          startAngle: 90,
          splitNumber: 4,
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#4FA6F7',
              fontSize: 14,
            }
          },
          nameGap: 3,
          splitArea: {
            areaStyle: {
              color: ['#0E1E6D', '#0C52A4', '#102F7D', '#13216B'],
            }
          },
          axisLine: {
            lineStyle: {
              color: '#163794'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#163794'
            }
          }
        },
        series: {
          name: '雷达图',
          type: 'radar',
          itemStyle: {
            emphasis: {
              // color: 各异,
              lineStyle: {
                width: 4
              }
            }
          },
          data: seriesData
        }
      };

      let myChart = echarts.init(this.$refs.chart);
      console.log('22222222222222222',this.$refs.chart.offsetWidth
      )
      myChart.clear();
      myChart.resize(
          {
            width: this.$refs.chart.offsetWidth,
            height: this.$refs.chart.offsetHeight
          }
      )
      myChart.setOption(option);
    }
  },
  mounted() {
    this.setChart();
  },
}

</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 310px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
  .title-continer{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    border-top:2px solid #0E1E6D;
    .one{
      height: 28px;
      text-align: center;
      line-height: 28px;
      border-left: 2px solid #0E1E6D;
      border-right: 2px solid #0E1E6D;
      background: #131C59;
      //opacity: 0.5;
    }
    .two{
      flex: 1;
      height: 28px;
      text-align: center;
      line-height: 28px;
      border-right: 2px solid #0E1E6D;
    }
  }
}
:deep(.dv-border-svg-container) {
  display: none;
}
</style>
